<template>
  <view class="order-container">
    <uni-forms ref="form" :model="formData" :rules="rules">
      <uni-forms-item label="订单编号" name="orderNo">
        <uni-easyinput v-model="formData.orderNo" placeholder="请输入订单编号" />
      </uni-forms-item>
      <uni-forms-item label="产品名称" name="productName">
        <uni-easyinput v-model="formData.productName" placeholder="请输入产品名称" />
      </uni-forms-item>
      <uni-forms-item label="生产数量" name="quantity">
        <uni-number-box v-model="formData.quantity" min="1" />
      </uni-forms-item>
      <uni-forms-item label="计划开始日期" name="planStartDate">
        <uni-datetime-picker v-model="formData.planStartDate" type="date" />
      </uni-forms-item>
      <uni-forms-item label="计划完成日期" name="planEndDate">
        <uni-datetime-picker v-model="formData.planEndDate" type="date" />
      </uni-forms-item>
      <uni-forms-item label="备注" name="remark">
        <uni-easyinput v-model="formData.remark" type="textarea" placeholder="请输入备注信息" />
      </uni-forms-item>
    </uni-forms>
    
    <view class="button-group">
      <button class="submit-btn" @click="submitForm">提交订单</button>
      <button class="reset-btn" @click="resetForm">重置</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        orderNo: '',
        productName: '',
        quantity: 1,
        planStartDate: '',
        planEndDate: '',
        remark: ''
      },
      rules: {
        orderNo: {
          rules: [{
            required: true,
            errorMessage: '请输入订单编号'
          }]
        },
        productName: {
          rules: [{
            required: true,
            errorMessage: '请输入产品名称'
          }]
        },
        quantity: {
          rules: [{
            required: true,
            errorMessage: '请输入生产数量'
          }]
        },
        planStartDate: {
          rules: [{
            required: true,
            errorMessage: '请选择计划开始日期'
          }]
        },
        planEndDate: {
          rules: [{
            required: true,
            errorMessage: '请选择计划完成日期'
          }]
        }
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate().then(res => {
        // TODO: 实现提交订单的逻辑
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
      }).catch(err => {
        console.error(err)
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.order-container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.button-group {
  margin-top: 40rpx;
  padding: 0 20rpx;
  
  .submit-btn {
    background-color: #007aff;
    color: #fff;
    margin-bottom: 20rpx;
  }
  
  .reset-btn {
    background-color: #f8f8f8;
    color: #666;
    border: 1px solid #ddd;
  }
}
</style>